<template>
    <div class="base-info">
        <v-card class="info-card">
            <v-card-title>完善资料</v-card-title>
            <div class="box">
                <DatePicker type="date" @on-change="dateChange" placeholder="入学年份"></DatePicker>
                <span>{{enrollmentYear && new Date(enrollmentYear).toLocaleDateString()}}</span>
            </div>
            <v-select v-model="selectedGender" :items="gender" label="性别"></v-select>
            <v-text-field v-model="qq" label="QQ号" required></v-text-field>
            <v-text-field v-model="phone" label="电话" required></v-text-field>
            <v-text-field v-model="address" label="地址" required></v-text-field>
            <v-text-field v-model="idCard" label="身份证号" required></v-text-field>
            <v-select v-model="selectedSchool" :items="school" label="所在学校" @change="schoolChange"></v-select>
            <v-select v-model="selectedCollege" :items="college[curSchoolIndex]" label="所在学院"></v-select>
            <v-text-field v-model="major" label="专业" required></v-text-field>
            <v-text-field v-model="dormitoryAddr" label="宿舍地址" required></v-text-field>
            <v-btn x-large color="primary" dark @click="modifyBaseInfo">保存修改</v-btn>
        </v-card>
        <v-card class="mail-modify">
            <v-card-title>修改绑定邮箱</v-card-title>
            <div class="box">
                <v-text-field v-model="email" label="邮箱" required></v-text-field>
                <v-btn @click="sendMailVerifyCode" small tile color="success">
                    发送
                </v-btn>
            </div>
            <v-text-field v-model="emailVerifyCode" label="邮箱验证码" required></v-text-field>
            <v-btn @click="bindMailVerifyCode" x-large color="primary" dark>绑定邮箱</v-btn>
        </v-card>
        <v-card class="password-modify">
            <v-card-title>修改密码</v-card-title>
            <v-text-field v-model="originPsd" label="原密码" required></v-text-field>
            <v-text-field v-model="newPsd" label="新密码" required></v-text-field>
            <v-text-field v-model="confirmNewPsd" label="确认新密码" required></v-text-field>
            <v-btn x-large color="primary" dark @click="resetPlayerPassword">修改密码</v-btn>
        </v-card>
    </div>
</template>

<script>
    import ajax from "../../Ajax";
    import common from '../../common'

    export default {
        name: "BaseInfo",
        data() {
            return {
                gender: ['男', '女'],
                school: [
                    '职大', '九院', '船校', '财校'
                ],
                college: [
                    [
                        '师范学院', '学前教育学院', '艺术与体育学院', '机电工程学院', '建筑工程学院', '经济管理学院', '文化旅游学院', '信息工程学院', '护理学院', '农经学院', '中专部', '技师学院'
                    ],
                    [
                        '马克思主义学院', '经济学院', '法学院', '教育学院', '体育学院', '文学与传媒学院外国语学院', '艺术学院', '理学院', '化学化工学院', '机械与智能制造学院', '材料科学与工程学院电子信息工程学院', '计算机与大数据科学学院', '建筑工程与规划学院', '医学院', '药学与生命科学学院', '护理学院', '管理学院', '旅游与地理学院', '电子商务学院', '国际交流学院', '继续教育学院', '资源环境学院'
                    ],
                    [
                        '机械工程学院', '电气工程学院', '船舶工程学院', '汽车工程学院', '信息工程学院', '建筑工程学院', '财会金融学院', '经济管理学院', '继续教育学院'
                    ],
                    [
                        '会计学院', '数字经济学院', '财税金融学院', '工商管理学院', '经济贸易学院', '信息工程学院', '外国语学院', '基础教育学院'
                    ]
                ],
                selectedGender: '',
                selectedSchool: '',
                curSchoolIndex: '',
                selectedCollege: '',
                enrollmentYear: '',
                major: '',
                dormitoryAddr: '',
                idCard: '',
                address: '',
                qq: '',
                phone: '',
                email: '',
                emailVerifyCode: '',
                originPsd: '',
                newPsd: '',
                confirmNewPsd: ''
            }
        },
        methods: {
            schoolChange(v) {
                let index = this.school.indexOf(v)
                this.curSchoolIndex = index
            },
            dateChange(v, d) {
                console.log(v)
                console.log(d)
                this.enrollmentYear = v
            },
            modifyBaseInfo() {
                let playerName = common.getCookie('playerName')
                if (!!!playerName) {
                    this.$Message.warning('玩家名获取失败')
                    return
                }
                if (this.selectedGender === '') {
                    this.$Message.warning('请输入性别')
                    return
                }
                if (this.school === '') {
                    this.$Message.warning('请输入学校')
                    return
                }
                if (this.college === '') {
                    this.$Message.warning('请输入学院')
                    return
                }
                if (this.enrollmentYear === '') {
                    this.$Message.warning('请输入入学年份')
                    return
                }
                if (this.major === '') {
                    this.$Message.warning('请输入专业')
                    return
                }
                if (this.dormitoryAddr === '') {
                    this.$Message.warning('请输入宿舍地址')
                    return
                }
                if (this.idCard === '' || !common.regex.idCard.test(this.idCard)) {
                    this.$Message.warning('请输入正确的身份证号')
                    return
                }
                if (this.address === '') {
                    this.$Message.warning('请输入地址')
                    return
                }
                if (this.qq === '' || !common.regex.qq.test(this.qq)) {
                    this.$Message.warning('请输入正确的QQ号')
                    return
                }
                if (this.phone === '' || !common.regex.phone.test(this.phone)) {
                    this.$Message.warning('请输入正确的电话号码')
                    return
                }
                let param = new URLSearchParams()
                param.append("playerName", playerName)
                param.append("gender", this.selectedGender == '男' ? '1' : '0')
                param.append("school", this.selectedSchool)
                param.append("college", this.selectedCollege)
                param.append("enrollmentYear", this.enrollmentYear.toLocaleString())
                param.append("major", this.major)
                param.append("dormitoryAddr", this.dormitoryAddr)
                param.append("idCard", this.idCard)
                param.append("address", this.address)
                param.append("qq", this.qq)
                param.append("phone", this.phone)
                ajax.post('/account/modifyBaseInfo', param).then(res => {
                    console.log(res)
                    if (res.data.code === 200) {
                        this.$Message.success(res.data.msg)
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            },
            sendMailVerifyCode() {
                if (this.email === '' || !common.regex.email.test(this.email)) {
                    this.$Message.warning('请输入正确的邮箱')
                    return
                }
                let param = new URLSearchParams()
                param.append("mail", this.email)
                ajax.post('/account/sendBindMailVerifyCode', param).then(res => {
                    if (res.data.code === 200) {
                        this.$Message.success(res.data.msg)
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            },
            bindMailVerifyCode() {
                let playerName = common.getCookie('playerName')
                if (!!!playerName) {
                    console.log('玩家名获取失败')
                    return
                }
                if (this.emailVerifyCode === '') {
                    this.$Message.warning('请输入邮箱验证码')
                    return
                }
                if (this.email === '' || !common.regex.email.test(this.email)) {
                    this.$Message.warning('请输入正确的邮箱')
                    return
                }
                let param = new URLSearchParams()
                param.append("playerName", playerName)
                param.append("mail", this.email)
                param.append("verifyCode", this.emailVerifyCode)
                ajax.post('/account/bindMail', param).then(res => {
                    if (res.data.code === 200) {
                        this.$Message.success(res.data.msg)
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            },
            resetPlayerPassword() {
                let playerName = common.getCookie('playerName')
                if (!!!playerName) {
                    console.log('玩家名获取失败')
                    return
                }
                if (this.originPsd === '' || this.originPsd.length < 6) {
                    this.$Message.warning('请输入大于6位原密码')
                    return
                }
                if (this.newPsd === '' || this.newPsd.length < 6) {
                    this.$Message.warning('请输入大于6位新密码')
                    return
                }
                if (this.newPsd === this.originPsd) {
                    this.$Message.warning('原密码与新密码相同')
                    return
                }
                let param = new URLSearchParams()
                param.append("playerName", playerName)
                param.append("originPsd", this.originPsd)
                param.append("newPsd", this.newPsd)
                ajax.post('/account/resetPlayerPassword', param).then(res => {
                    if (res.data.code === 200) {
                        this.$Message.success(res.data.msg)
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            }
        },
        mounted() {
            let playerName = common.getCookie('playerName')
            if (!!!playerName) {
                console.log('玩家名获取失败')
                return
            }
            let param = new URLSearchParams()
            param.append("playerName", playerName)
            ajax.post('/account/getPlayerInfo', param).then(res => {
                console.log(res)
                if (res.data.code === 200) {
                    if (res.data.playerInfo.gender) {
                        this.selectedGender = res.data.playerInfo.gender == '1' ? '男' : '女'
                    }
                    this.selectedSchool = res.data.playerInfo.school
                    this.selectedCollege = res.data.playerInfo.college
                    this.enrollmentYear = res.data.playerInfo.enrollmentYear
                    this.dormitoryAddr = res.data.playerInfo.dormitoryAddr
                    this.idCard = res.data.playerInfo.idCard
                    this.major = res.data.playerInfo.major
                    this.address = res.data.playerInfo.address
                    this.qq = res.data.playerInfo.qq
                    this.phone = res.data.playerInfo.phone
                    this.email = res.data.playerInfo.email
                    let index = this.school.indexOf(this.selectedSchool)
                    this.curSchoolIndex = index
                }
            })
        }
    }
</script>

<style lang="scss" scoped>
    .base-info {
        display: flex;
        justify-content: space-around;
        .info-card {
            width: 500px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .box {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 10px 0;
            }
            .v-input {
                width: 60%;
            }
        }

        .mail-modify {
            width: 500px;
            height: 320px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .box {
                width: 80%;
                display: flex;
                align-items: center;
            }
            .v-input {
                width: 60%;
            }
        }

        .password-modify {
            width: 500px;
            height: 400px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .v-input {
                width: 60%;
            }
        }
    }
</style>
